<script setup>
  const openNewTab = (url) => {
    window.open(url, '_blank');
  }
</script>

<template>
  <div class="products_box">
    <div class="title wow animate__animated animate__fadeInUp">Products</div>
    <div class="content">
      <div class="su_bg wow animate__animated animate__fadeInUp">
        <div class="su_title">ZKC <br/>Development Kit</div>
        <div class="su_text">The ZKC Node is a cutting-edge infrastructure component designed to revolutionize the development of decentralized applications (dApps) across various domains. As a core element of the ZKCross development framework, it empowers developers to create scalable, secure, and verifiable blockchain-based solutions with ease.</div>
      </div>
      <div class="item_content">
        <div class="item item_w_bg wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_1.png" alt="">
          <div class="item_title">Modular Architecture</div>
          <div class="item_des">Our modular design allows for flexible integration and seamless upgrades, ensuring your dApp can evolve with the latest blockchain innovations.</div>
        </div>
        <div class="item wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_2.png" alt="">
          <div class="item_title">Enhanced User Experience</div>
          <div class="item_des">By optimizing backend processes, ZKC Node significantly improves transaction speed and reduces costs, resulting in a smoother user experience.</div>
        </div>
        <div class="item wow item_w_bg animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_5.png" alt="">
          <div class="item_title">zkwasm Integration</div>
          <div class="item_des">Leverage the efficiency of WebAssembly and the security of zero-knowledge proofs for complex computations.</div>
        </div>
        <div class="item wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_3.png" alt="">
          <div class="item_title">Scalability</div>
          <div class="item_des">Built to handle high transaction volumes, ensuring your dApp performs well as it grows.</div>
        </div>
        <div class="item wow item_w_bg animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_4.png" alt="">
          <div class="item_title">Interoperability</div>
          <div class="item_des">Easily connect with various blockchain networks and protocols, expanding your dApp's reach and functionality.</div>
        </div>
        <div class="item wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_6.png" alt="">
          <div class="item_title">Robust State Management</div>
          <div class="item_des">Maintain consistent and verifiable application states across decentralized networks.</div>
        </div>
      </div>
      <div class="details_content">
        <div class="detail_title wow animate__animated animate__fadeInUp">ZKVRF</div>
        <div class="detail_des wow animate__animated animate__fadeInUp">zkVRF (Zero-Knowledge Verifiable Random Function) is a decentralized system for generating verifiable, tamper-resistant random numbers. It combines zero-knowledge proofs with distributed signing to provide secure and scalable randomness for applications requiring high integrity. ZkVRF addresses limitations of existing approaches, offering a trustless solution for various use cases needing reliable random number generation.</div>
        <div class="details_item wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_02.png" alt="">
          <div class="line"></div>
          <div class="text">Trustless VRF Via ZKP</div>
        </div>
        <div class="details_item wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_03.png" alt="">
          <div class="line"></div>
          <div class="text">Easy To Use In Applications </div>
        </div>
        <div class="details_item wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/products_01.png" alt="">
          <div class="line"></div>
          <div class="text">Decentralized With Any Participants To Join</div>
        </div>
        <div class="canves_bg wow animate__animated animate__fadeInUp">
          <img src="@/assets/images/canves_bg.jpg" alt="">
          <div @click="openNewTab('https://zkvrf.xyz/')" class="click_dom"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.products_box {
  margin-top: 42px;
  .title {
    font-weight: 600;
    font-size: 30px;
    color: #000000;
    padding-left: 5.33%;
  }
  .content {
    margin-top: 23px;
    padding: 5.87% 8%;
    background: #F7F7F7;
    border-radius: 33px;
    border: 1px solid #DEDEDE;
    box-sizing: border-box;
    .canves_bg {
      width: 100%;
      margin-top: 30px;
      position: relative;
      img {
        width: 100%;
      }
      .click_dom {
        position: absolute;
        z-index: 1;
        height: 20px;
        width: 25%;
        bottom: 0px;
        left: 25%;
      }
    }
    .details_content {
      margin-top: 40px;
      padding: 11.11% 6.35%;
      background: #D4DAE0;
      border-radius: 23px;
      margin-top: 23px;
      .details_item {
        display: flex;
        align-items: center;
        margin-top: 16px;
        background: #7C8B9A;
        border-radius: 11px;
        padding: 4%;
        img {
          width: 48px;
        }
        .line {
          background-color: #0B344B;
          width: 1px;
          height: 38px;
          margin: 0px 10px;
        }
        .text {
          font-weight: 500;
          font-size: 15px;
          color: #FFFFFF;
          line-height: 18px;
        }
      }
      .detail_title {
        font-weight: 600;
        font-size: 30px;
        color: #000000;
        line-height: 36px;
      }
      .detail_des {
        font-weight: 300;
        font-size: 15px;
        color: #000000;
        line-height: 23px;
        margin-top: 20px;
      }
    }
    .item_content {
      .item {
        border-radius: 16px;
        padding: 6.35%;
        margin-top: 10.15%;
        img {
          width: 51px;
        }
        .item_title {
          font-weight: 500;
          font-size: 20px;
          color: #0B344B;
          line-height: 24px;
          margin-top: 20px;
        }
        .item_des {
          font-weight: 400;
          font-size: 13px;
          color: #474C42;
          line-height: 17px;
          margin-top: 10px;
        }
      }
      .item_w_bg {
        background: #FFFFFF;
      }
    }
    .su_bg {
      background-image: linear-gradient(to bottom right, #010C22, #0B354D);
      padding: 11.11% 6.35%;
      border-radius: 16px;
      .su_title {
        font-weight: 600;
        font-size: 30px;
        color: #FFFFFF;
        line-height: 36px;
      }
      .su_text {
        font-weight: 300;
        font-size: 15px;
        color: #FFFFFF;
        line-height: 23px;
        margin-top: 10.7%;
      }
    }
  }
}
</style>
